
import React, { Component } from "react";
// import echarts from "echarts/lib/echarts";
import echarts from "echarts";
import styles from './config.css'
import { Col, Row, Tooltip,Table, Button, Divider, Progress, Badge, Rate, Typography, Tag, Card, Radio, Modal, Descriptions, Statistic, Switch,
          Select, Steps, Timeline, Form, Input, InputNumber, Result, Image, DatePicker, Upload, Spin, Popconfirm    } from 'antd';
import ReactEcharts from 'echarts-for-react';
import Breadcrumbs from "../../../components/component/Breadcrumb/breadcrumb";
import { BarChartOutlined, AlertOutlined, CaretUpOutlined, CaretDownOutlined, SyncOutlined, PoweroffOutlined, TwitterOutlined, GlobalOutlined,
         ClockCircleOutlined, WifiOutlined, DatabaseOutlined, PlusCircleOutlined, CloudServerOutlined, UploadOutlined, LinkOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { textStyle } from "echarts/lib/theme/dark";
import { message } from "antd";
// import { ProColumns } from '@ant-design/pro-table';
// import ProTable, { TableDropdown } from '@ant-design/pro-table';
const { Title } = Typography;
const { TextArea } = Input;
const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

const columnses = [
  {
    title: '立项名称',
    dataIndex: 'name',
    width:266,
    ellipsis:true,
    render: (name) => (
      <Tooltip placement="topRight" title={name}>
        {name}
      </Tooltip>
    ),
  },
  {
    title: '金额',
    dataIndex: 'count',
    sorter: {
      compare: (a, b) => a.chinese - b.chinese,
      multiple: 3,
    },
    render:(_,record) => <span>{record.count}万元</span>
  },
  {
    title: '用途',
    dataIndex: 'description',
    width:222
  },
  {
    title: '管制单位',
    dataIndex: 'company',
  },
  {
    title: '发起人',
    dataIndex: 'sponsor', 
  },
  {
    title: '申请类型',
    dataIndex: 'type', 
  },
  {
    title: '审批状态',
    dataIndex: 'status', 
    render:() => <span><Badge status="success" /> 成功</span>
  },
  {
    title: '申请时间',
    dataIndex: 'creatTime', 
    width:220
  },  
  {
    title: '操作',
    dataIndex: 'business',
    width:211,
    render:(_,record)=>{
      return(
        <span>
          <a>审批</a>
          <a style={{marginLeft:20}}>详情</a>
        </span>
      )
    }
  },
];

const uploadProps = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  }  
}

const datases = [
  {
    key: '1',
    name: '西二环辅路道路提升项目',
    count: 136.95,
    description: '西二环辅路修缮和整补',
    company:'住建局',
    sponsor:'李洪亮',
    type:'基础设施维护',
    status:'success',
    creatTime:'2022-10-21 18:29:51',
  },  
  {
    key: '2',
    name: '西市铁路建设道路项目',
    count: 1688.37,
    description: '西市铁路建设',
    company:'城建局局',
    sponsor:'王福建',
    type:'基础修建',
    status:'success',
    creatTime:'2022-01-22 10:19:56',
  },  
  {
    key: '3',
    name: '南二环建设路西口道路花卉养殖项目',
    count: 152.20,
    description: '建设路西口绿化',
    company:'住建局',
    sponsor:'刘楠非',
    type:'基础设施维护',
    status:'success',
    creatTime:'2022-11-01 08:21:09',
  },
  {
    key: '4',
    name: '西安西咸新区沣西新城立交桥改造项目',
    count: 280.55,
    description: '立交桥改造项目',
    company:'住建局',
    sponsor:'李柳菲',
    type:'基础设施建设',
    status:'success',
    creatTime:'2021-12-17 13:21:24',
  },
  {
    key: '5',
    name: '秦汉新城翱翔小镇翱翔三路绿化养护项目',
    count: 92.31,
    description: '绿化养护项目',
    company:'住建局',
    sponsor:'周立齐',
    type:'基础设施维护',
    status:'success',
    creatTime:'2022-10-10 12:19:11',
  },
  {
    key: '6',
    name: '西安市秦岭丰裕口道路养护项目',
    count: 68.37,
    description: '道路养护项目',
    company:'住建局',
    sponsor:'李洪亮',
    type:'基础设施维护',
    status:'success',
    creatTime:'2022-05-24 15:09:41',
  },
];

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {  
      loading:false,    
      loadings:false,    
      tableDatas:[],  
      values:1,
      alarmVisible:false,
      handleVisible:false,
      recordVisible:false,
      spins:false,
      detailInfo:{},
      cpuInfo:{},
      tableData:[],
      currentStep:0,
      recordTableData:[],
      columns: [
        {
          title: '告警ID',
          dataIndex: 'id',
          ellipsis:true,
          width:200,
          render:(_,record) => <a onClick={()=>{this.getDetailInfo(record)}}>{record.id}</a>
        },
        {
          title: '告警名称',
          dataIndex: 'name',
          ellipsis:true,
          width:210,
        },
        {
          title: '主机IP',
          dataIndex: 'ip',
          ellipsis:true,
          width:125,
        },
        {
          title: '端口',
          dataIndex: 'port',
          ellipsis:true,
          width:58,
        },
        {
          title: '报警次数',
          dataIndex: 'num',
          ellipsis:true,
          width:70,
        },
        {
          title: '等级',
          dataIndex: 'level',
          ellipsis:true,
          width:70,
          render: (_,record) => {
            return this.getStatus(record.level)
          },    
        },  
        {
          title: 'CPU使用率',
          dataIndex: 'count',
          width:100,
          ellipsis:true,
          sorter: {
            compare: (a, b) => a.chinese - b.chinese,
            multiple: 3,
          },
          render: (text)=> text
        },
        {
          title: '部门性质',
          dataIndex: 'unit',
          width:90,
          ellipsis:true,
          sorter: {
            compare: (a, b) => a.math - b.math,
            multiple: 2,
          },
        },
        {
          title: '服务归属单位',
          dataIndex: 'institution',
          ellipsis:true,
          width:100,
          sorter: {
            compare: (a, b) => a.english - b.english,
            multiple: 1,
          },
        },
        {
          title: '主机数',
          dataIndex: 'source', 
          width:100,
          ellipsis:true,
          render: (text)=> text+'台',
          sorter: {
            compare: (a, b) => a.english - b.english,
            multiple: 1,
          },
        },
        {
          title: '触发时间',
          dataIndex: 'creatTime', 
          ellipsis:true,
          width:150,
        },   
        {
          title: '告警时间',
          dataIndex: 'alarmTime', 
          ellipsis:true,
          width:150,
        },
        {
          title: '操作',
          width:190,
          render: (_,record) => {
            return(
              <span>
                <a onClick={()=>{this.getDetailInfo(record)}} style={{marginLeft:5}}>详情</a>
                <a onClick={()=>{this.getRecord(record)}} style={{marginLeft:5}}>数据分析</a>
                <a onClick={()=>{this.handleAlarm(record)}} style={{marginLeft:5}}>处置</a>
                <Popconfirm
                  title="确定删除当前数据吗？"
                  onConfirm={this.confirms}
                  okText="确定"
                  cancelText="取消"
                >
                  <a  style={{marginLeft:5,color:'#f14c4c'}}>删除</a>
                </Popconfirm>   
              </span>
            )
          },
        },
      ],
      hostColumns: [
        {
          title: '监控指标',
          dataIndex: 'name',
          ellipsis:true,
        },   
        {
          title: '监控间隔',
          dataIndex: 'timer',
          ellipsis:true,
        },           
        {
          title: 'CPU',
          dataIndex: 'cpu',   
          ellipsis:true,    
          render:(_,record) =>  record.cpu
        },
        {
          title: 'GPU',
          dataIndex: 'disc',   
          ellipsis:true,    
          render:(_,record) =>  record.disc
        },
        {
          title: '内存',
          dataIndex: 'storage',
          ellipsis:true,
          render:(_,record) =>  record.storage
        },
        {
          title: '磁盘',
          dataIndex: 'disc',
          ellipsis:true,
        },
        {
          title: '带宽',
          dataIndex: 'network',
          ellipsis:true,
        },     
        {
          title: '网关',
          dataIndex: 'temperature',
          ellipsis:true,
        },                      
        {
          title: '增长率',
          dataIndex: 'rate',
          ellipsis:true,
          render:(_,record) =>  record.key % 3 >1 ? <span><CaretUpOutlined style={{color:'rgb(135, 208, 104)'}}  /> {record.rate}</span> : <span><CaretDownOutlined style={{color:'#FF4D4F'}} /> {record.rate}</span>
        }, 
        {
          title: '数据状态',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.key % 3 >1){
                return  <span>
                  <Switch checked={true}  />
                </span>
            }else{
              return  <span>
                  <Switch checked={false} />
            </span>
            }
          }
        },               
        {
          title: '监控状态',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status === '成功'){
                return  <span>
                  <Badge status="success" /> 
                  <span style={{marginLeft:6}}>正常</span>
                </span>
            }else{
              return  <span>
                <Badge status="error" /> 
                <span style={{marginLeft:6}}>异常</span>
            </span>
            }
          }
        },                   
      ],   
      recordColumns: [
        {
          title: '日志分析',
          dataIndex: 'name',
          width:165,
          ellipsis:true,
        },
        {
          title: '级别',
          dataIndex: 'rank',
          width:46,
          ellipsis:true,
          align:'center'
        },  
        {
          title: '次数',
          width:45,
          dataIndex: 'count',
          ellipsis:true,
          align:'center'
        },  
        {
          title: '通知方式',
          dataIndex: 'msg',
          ellipsis:true,
          align:'center'
        },        
        {
          title: 'CPU',
          dataIndex: 'cpu',   
          ellipsis:true,    
          render:(_,record) =>  record.cpu
        },
        {
          title: '内存',
          dataIndex: 'storage',
          ellipsis:true,
          render:(_,record) =>  record.storage
        },
        {
          title: '磁盘',
          dataIndex: 'disc',
          ellipsis:true,
        },
        {
          title: '带宽',
          dataIndex: 'network',
          ellipsis:true,
        },  
        {
          title: '负载均衡',
          dataIndex: 'cpu',   
          ellipsis:true,    
          render:(_,record) =>  record.cpu
        },   
        {
          title: '主备倒换',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status === '成功'){
                return  <span>
                  <Badge status="success" /> 
                  <span style={{marginLeft:6}}>启用</span>
                </span>
            }else if(record.status === '失败'){
              return  <span>
                  <Badge status="error" /> 
                  <span style={{marginLeft:6}}>未启用</span>
              </span>
            }else{
              return  <span>
                   <Badge status="default" text="未配置" />
              </span>
            }
          }
        },                
        {
          title: 'CPU温度',
          dataIndex: 'temperature',
          ellipsis:true,
        },                      
        {
          title: '使用增长率',
          dataIndex: 'rate',
          ellipsis:true,
          render:(_,record) =>  record.key % 3 >1 ? <span><CaretUpOutlined style={{color:'rgb(135, 208, 104)'}}  /> {record.rate}</span> : <span><CaretDownOutlined style={{color:'#FF4D4F'}} /> {record.rate}</span>
        },        
        {
          title: '应用状态',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status === '成功'){
                return  <span>
                  <Badge status="success" /> 
                  <span style={{marginLeft:6}}>运行中</span>
                </span>
            }else if(record.status === '失败'){
              return  <span>
                <Badge status="error" /> 
                <span style={{marginLeft:6}}>停止</span>
            </span>
            }else{
              return  <span>
                   <Badge status="default" text="未启动" />
              </span>
            }
          }
        },    
        {
          title: '启动状态',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status === '成功'){
                return  <span>
                  <Badge status="success" /> 
                  <span style={{marginLeft:6}}>启动</span>
                </span>
            }else if(record.status === '失败'){
              return  <span>
                  <Badge status="error" /> 
                  <span style={{marginLeft:6}}>失败</span>
              </span>
            }else{
              return  <span>
                   <Badge status="default" text="暂停" />
              </span>
            }
          }
        },
        {
          title: '数据库状态',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status === '成功'){
                return  <span>
                  <Badge status="error" /> 
                  <span style={{marginLeft:6}}>异常</span>
                </span>
            }else{
              return  <span>
                  <Badge status="success" /> 
                  <span style={{marginLeft:6}}>正常</span>
            </span>
            }
          }
        },   
        {
          title: '诊断报告',
          dataIndex: 'report',
          width:110,
          ellipsis:true,
          align:'center',
          render:(_,record)=>{
            return(
              <span>
                <a><LinkOutlined />{record.report}</a>
              </span>
            )
          }
        },                             
      ],                   
    };
  }

  getStatus = (level) => {
    if(level =='serious'){
        return(
            <Badge status="error" text="严重" />
        )
    }else if(level =='normal'){
      return(
        <Badge status="success" text="正常" />
        )
    }else if(level =='same'){
      return(
        <Badge status="warning" text="一般" />
        )
    }
  }

  confirms = () => {
    message.success('告警删除成功!');
    this.getData();
  }

  getRecord = () =>{
    let lists = [];
    for (let i = 0; i < Math.floor(Math.random()*50); i++) {
      lists.push({
        key: i,
        name: i % 3 > 1 ? '数据库服务器内存溢出'+Math.floor(Math.random() * 97).toFixed(2)+'MB' : '服务器带宽拥堵'+Math.floor(Math.random() * 650).toFixed(2)+'kb/s',
        cpu: Math.floor(Math.random() * 98)+'%',
        storage: Math.floor(Math.random() * 97)+'%',
        disc: Math.floor(Math.random() * 95)+'%',
        network: Math.floor(Math.random() * 521)+'KB/s',
        acoustic: Math.floor(Math.random() * 93)+'%',
        temperature: Math.floor(Math.random() * 92)+'℃',
        rate: Math.floor(Math.random() * 50)+'%',
        status: i % 3 == 1 ? '成功' : i % 3 == 2 ? '失败' : '一般',
        region: i % 4 > 1 ? '华东' :'华南',
        pod: i % 5 > 2 ? 'POD'+i :'POD'+i*2,
        rank: i % 5 == 2 ? 'I' :'II',
        count: i % 5 == 2 ? 1 : i % 3,
        msg: i % 5 == 2 ? '短信通知' : '电话通知',
        report: `d${i}7${i}0${i}6${Math.floor(Math.random() * 10)}-${Math.floor(Math.random() * 10)}c${Math.floor(Math.random() * 10)}d-4${i}f.excel`
      });
    }
    this.setState({recordVisible:true, recordTableData:lists,loadings:false})
  }

  getDetailInfo = (info)=>{
    console.log(info)
    this.setState({detailInfo:info,alarmVisible:true,
    cpuInfo:{
      cpu: (Math.random()*(100)).toFixed(2),
      storage: (Math.random()*(100)).toFixed(2),
      disc: (Math.random()*(100)).toFixed(2),
      network: (Math.random()*(500)).toFixed(1),
      acoustic: (Math.random()*(100)).toFixed(2),
      temperature: (Math.random()*(96)).toFixed(2),
    }});
  }
  
  getDetailTable = () =>{
    let list = [];
    let total = Math.floor(Math.random()*50);
    for (let i = 0; i < 9; i++) {
      list.push({
        key: i,
        name: i % 3 == 0 ? 'CPU Load' : i % 3 == 1 ? 'GPU Load' : 'SSD Overd',
        cpu: Math.floor(Math.random() * 98).toFixed(2)+'%',
        timer: Math.floor(Math.random() * 15)+'min',
        storage: Math.floor(Math.random() * 97).toFixed(2)+'%',
        disc: Math.floor(Math.random() * 95).toFixed(2)+'%',
        network: Math.floor(Math.random() * 521)+'KB/s',
        acoustic: Math.floor(Math.random() * 93)+'%',
        temperature: Math.floor(Math.random() * 92)+'%',
        rate: Math.floor(Math.random() * 50)+'%',
        status: i % 2 == 1 ? '成功' :'失败',
      });
    }
    this.setState({tableData:list,loadings:false})
  }

  getData = () =>{
    this.setState({
      loading: true,
      tableDatas:[]
    });
    let das = [];
    for (let i = 0; i < 68; i++) {
      das.push({
          key: i,
          id: i % 2 ==1 ? `d${i}7${i}0${i}6${Math.floor(Math.random() * 10)}-${Math.floor(Math.random() * 10)}c${Math.floor(Math.random() * 10)}d-4${i}8d-a` : `a${i}2${Math.floor(Math.random() * 10)}1${Math.floor(Math.random() * 10)}b${Math.floor(Math.random() * 10)}-${i}f${i}A-4${i}8d-as`,
          name: i % 5 == 1 ? <span>带宽无法访问-服务响应异常</span> : i % 5 ==  2 ? <span>主机服务器磁盘报警-磁盘异常</span>: i % 5 ==  3 ? <span>服务器访问网络报警-带宽拥挤</span>: <span>MySql响应缓慢-数据库异常</span>,
          count: Math.floor(Math.random() * 97).toFixed(2)+'%',
          ip:`192.168.20${Math.floor(Math.random() * 10)}.${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}`,
          port:`80${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}`,
          num:Math.floor(Math.random() * 10),
          level: i % 5 == 1 ? 'same':  i % 5 ==2 ? 'serious' :'normal',
          unit: i % 5 == 1 ? '党组织':  i % 5 ==2 ? '政府组织' :'企业协会',
          institution: i % 5 == 1 ? '城建局':  i % 5 ==2 ? '住建局' :'环保局',
          source: Math.floor(Math.random() * 100),
          business:'操作权限,管理用户,查看日志',
          creatTime:`202${i % 5 == 1 ? 2 : 3}-0${Math.floor(Math.random() * 10)}-2${Math.floor(Math.random() * 10)} 1${Math.floor(Math.random() * 10)}:2${Math.floor(Math.random() * 10)}:3${Math.floor(Math.random() * 10)}`,
          alarmTime:`202${i % 5 == 1 ? 2 : 3}-0${Math.floor(Math.random() * 10)}-1${Math.floor(Math.random() * 10)} 1${Math.floor(Math.random() * 10)}:5${Math.floor(Math.random() * 10)}:4${Math.floor(Math.random() * 10)}`
      })
    }
    setTimeout(() => {
      this.setState({
        loading: false,
        tableDatas:das
      });    
    }, 1000);
  }

  getBarOption(){
    return {
      title: {
        text: ''
      },
      color:['#0780cf','#765005'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line'
        }
      },
      legend: {
        trigger:'item',
        left:'center'
      },
      grid: {
        left: '0%',
        right: '13%',
        bottom: '4%',
        top:'11%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        name:'月',
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
      },
      yAxis: {
        type: 'value',
        name:'集群(台)',
      },
      series: [
        {
          name: '服务正常',
          type: 'bar',
          barWidth:6,
          itemStyle: {
            normal: {
                //这里是颜色
                color: '#70ce42',
            }
          },
          data: [ 15, 16, 24, 19, 23, 28, 19, 20, 12, 9, 6, 2 ]
        },
        {
          name: '服务异常',
          type: 'bar',
          barWidth:6,
          itemStyle: {
            normal: {
                //这里是颜色
                color: '#aaa',
            }
          },
          data: [ 8, 11, 20, 18, 10, 8, 9, 2, 7, 3, 0, 1]
        }
      ]
    }
  }

  getCookieOption = () =>{
    return {
      color:['#05f8d6','#0082fc','#fdd845','#22ed7c','#09b0d3','#1d27c9'],
      title: {
        text:'云服务告警占比情况',
        // subtext: '云服务告警占比情况',
        left: 'center',
        textStyle:{
          color:'#777'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} {b} : {c}%'
      },
      series: [
        {
          name: '告警占比 :',
          type: 'pie',
          radius: '65%',
          data: [
            { value: 3, name: '系统盘溢出' },
            { value: 5, name: 'SSD过满' },
            { value: 7, name: '内存溢出' },
            { value: 2, name: '带宽超值' },
            { value: 1, name: '服务宕机' },
            { value: 2, name: 'CPU过载' },
            { value: 1, name: '数据库异常' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  }

  getCardOption = () =>{
    return {
      grid:{
        top:3,
        left:3,
        right:20,
        bottom:20
      },
      color: ["#5474fa"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
      },
      yAxis: {
        type: 'value',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            //color:"red"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        }
      },
      series: [
        {
          data: [0, 1, 0, 1, 1, 0, 2,3,2,1,0,0,2,6,3,1,3,0,2,8,3,1,1,0],
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle:{
            color:'#5474fa'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(84,116,250,1)'
            }, {
              offset: 1,
              color: 'rgba(84,116,250,0)'
            }])
          },          
        }
      ]
    };
  }

  getCPUOption = () =>{
    return {
      title:{
        left:'center',
        show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: 'CPU使用率',//主标题文本，'\n'指定换行
        textStyle:{
          color:'#aaa',
          fontSize:14,
          fontWeight:500
        }
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#69b5fb"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'使用率(%)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: [56.3, 53.6, 50.3, 48.8, 46.8, 63.9, 69.3,72.3,78.3,77.6,78.9,81.2,95.6,82.6,86.1,85.1,80.3,79.1,76.3,80.6,70.3,63.3,62.1,62.8],
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle:{
            color:'#69b5fb'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(105,181,251,0.9)'
            }, {
              offset: 1,
              color: 'rgba(105,181,251,0)'
            }])
          }
        }
      ]
    };
  }

  getGPUOption = () =>{
    return {
      title:{
        left:'center',
        show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: 'GPU使用率',//主标题文本，'\n'指定换行
        textStyle:{
          color:'#aaa',
          fontSize:14,
          fontWeight:500
        }        
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#4dab1f"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'使用率(%)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: [50.3, 53.6, 59.3, 48.8, 46.8, 23.9, 69.3,72.3,78.3,71.6,78.9,81.2,59.6,82.6,86.1,85.1,52.3,79.1,70.3,80.6,70.3,62.3,62.1,85.8],
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle:{
            color:'#4dab1f'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(77,171,31,0.9)'
            }, {
              offset: 1,
              color: 'rgba(77,171,31,0)'
            }])
          }
        }
      ]
    };
  }

  getNETOption = () =>{
    return {
      title:{
        left:'center',
        show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: 'NET使用率',//主标题文本，'\n'指定换行
        textStyle:{
          color:'#aaa',
          fontSize:14,
          fontWeight:500
        }        
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#e89313"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'使用率(%)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: [50.3, 53.6, 59.3, 48.8, 46.8, 23.9, 69.3,72.3,78.3,71.6,78.9,81.2,59.6,82.6,86.1,85.1,52.3,79.1,70.3,80.6,70.3,62.3,62.1,85.8],
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle:{
            color:'#e89313'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(232,147,19,0.9)'
            }, {
              offset: 1,
              color: 'rgba(232,147,19,0)'
            }])
          }
        }
      ]
    };
  }

  getDelayedOption = () =>{
    return {
      title:{
        left:'center',
        show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: 'API响应延时',//主标题文本，'\n'指定换行
        textStyle:{
          color:'#aaa',
          fontSize:14,
          fontWeight:500
        }        
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#ec7259"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'延时(ms)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: [3.3, 5.6, 5.3, 9.8, 6.8, 3.9, 9.3,3.3,3.3,5.6,8.9,4.2,9.6,6.6,6.1,7.1,2.3,9.1,2.3,4.6,6.3,6.3,2.1,5.8],
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle:{
            color:'#ec7259'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(236,114,89,0.9)'
            }, {
              offset: 1,
              color: 'rgba(236,114,89,0)'
            }])
          }
        }
      ]
    };
  }

  getQPSOption = () =>{
    return {
      title:{
        left:'center',
        show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: 'QPS延时',//主标题文本，'\n'指定换行
        textStyle:{
          color:'#aaa',
          fontSize:14,
          fontWeight:500
        }        
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#ede447"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'并发量(条)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: [13.3, 15.6, 15.3, 19.8, 16.8, 31.9, 12.3,13.3,15.3, 15.6,18.9,14.2,19.6,16.6,16.1,17.1,12.3,19.1,12.3,14.6,16.3,16.3,12.1,15.8],
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle:{
            color:'#ede447'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(237,228,71,0.9)'
            }, {
              offset: 1,
              color: 'rgba(237,228,71,0)'
            }])
          }
        }
      ]
    };
  }

  getStorageOption= () =>{
    return {
      title:{
        left:'center',
        show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: '内存(Storage)使用率监控',//主标题文本，'\n'指定换行
        textStyle:{
          color:'#aaa',
          fontSize:14,
          fontWeight:500
        }        
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#bd7df1"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'使用率(%)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: [50.3, 53.6, 59.3, 48.8, 46.8, 23.9, 69.3,72.3,78.3,71.6,78.9,81.2,59.6,82.6,86.1,85.1,52.3,79.1,70.3,80.6,70.3,62.3,62.1,85.8],
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle:{
            color:'#bd7df1'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(189,125,241,0.9)'
            }, {
              offset: 1,
              color: 'rgba(189,125,241,0)'
            }])
          }
        }
      ]
    };
  }

  getOption = () =>{
    return {
      title:{
        left:'center',
        show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: 'Storage内存使用率监控',//主标题文本，'\n'指定换行
        textStyle:{
          color:'#aaa',
          fontSize:14,
          fontWeight:500
        }        
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#b164f7"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'使用率(%)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: [30.3, 53.6, 51.3, 39.8, 46.8, 23.9, 59.3,32.3,38.3,51.6,38.9,41.2,59.6,62.6,66.1,75.1,52.3,39.1,20.3,40.6,60.3,60.3,62.1,35.8],
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle:{
            color:'#b164f7'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(177,100,247,0.9)'
            }, {
              offset: 1,
              color: 'rgba(177,100,247,0)'
            }])
          }
        }
      ]
    };
  }

  timeOnChange = (e) =>{
      this.setState({loadings:true, values:e.target.value, tableData: []},()=>{
        setTimeout(() => {
          this.getDetailTable()
        }, 1000);
      })
  }

  selectChange =(e) =>{
    this.setState({loadings:true, tableData: []},()=>{
      setTimeout(() => {
        this.getDetailTable()
      }, 1000);
    })
  }

  componentDidMount() {
    this.getData();
    setTimeout(() => {
      this.setState({loadings:true},()=>{
        this.getDetailTable()
      })
    }, 1000);
    window.scrollTo(0, 0);
  }

  onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
    this.getData();
  }

  onChartClick(param,echarts){
    console.log(param)
  } 

  onRecordEvents(param,echarts){
    this.setState({loadings:true, recordTableData: []},()=>{
      setTimeout(() => {
        this.getRecord();
      }, 1000);
    })    
  }

  handleAlarm = (row) =>{
    this.setState({handleVisible:true, detailInfo: row, cpuInfo:{
        cpu: (Math.random()*(100)).toFixed(2),
        storage: (Math.random()*(100)).toFixed(2),
        disc: (Math.random()*(100)).toFixed(2),
        network: (Math.random()*(500)).toFixed(1),
        acoustic: (Math.random()*(100)).toFixed(2),
        temperature: (Math.random()*(96)).toFixed(2),
    }})
  }

  handleOk = () =>{
    this.setState({alarmVisible:false, handleVisible: false, recordVisible:false})
  }

  stepOnChange = (value) => {
    this.setState({currentStep:value});
  };

  changeStep = (step) => {
    this.setState({spins:true},()=>{
      setTimeout(() => {
        this.setState({currentStep:step,spins:false});
      }, 2000);
    });
  }

  onTimeOk = (value) => {
    console.log('onOk: ', value);
  };

  onTimeChange = (value, dateString) => {
    console.log('Formatted Selected Time: ', dateString);
  };

  getCurrent = () => {
    const { detailInfo, cpuInfo, spins } = this.state;
    if(this.state.currentStep === 0){
      return(
        <div style={{width:'100%',marginLeft:20,marginTop:30}}>
          {
            spins ? <div style={{width:'100%',marginLeft:20,marginTop:30,height:300,textAlign:'center'}}><Spin  /></div>:
          <div>
            <Form
              name="basic"
              style={{width:836,margin:'0 auto'}}
              labelCol={{
                span: 4,
              }}
              wrapperCol={{
                span: 20,
              }}
              initialValues={{
                alarmType: 'f',
                alarmApp: '',
                status:true,
                alarmRule:[],
                type:"",
                interval:0,
                description:'',
                script:'',
                machine:''
              }}
              autoComplete="off">
              <Form.Item
                label="告警指标类型"
                name="alarmType"
                layout='inline'
                rules={[
                  {
                    required: true,
                    message: '告警指标类型!',
                  },
                ]}>
                  <Radio.Group defaultValue="a">
                    <Radio.Button value="a">JVM监控</Radio.Button>
                    <Radio.Button value="b">异常接口调用</Radio.Button>
                    <Radio.Button value="f">硬件指标异常</Radio.Button>
                    <Radio.Button value="c">主机监控</Radio.Button>
                    <Radio.Button value="d">线程池监控</Radio.Button>
                    <Radio.Button value="e">数据库指标</Radio.Button>
                  </Radio.Group>
              </Form.Item>              
              <Form.Item
                label="告警应用"
                name="alarmApp"
                rules={[
                  {
                    required: true,
                    message: '选择告警应用!',
                  },
                ]}
              >
                <Select
                  style={{width:300}}
                  defaultValue=""
                  options={[
                    {
                      value: 'CN-cpu-service',
                      label: 'CN-cpu-service',
                    },
                    {
                      value: 'CN-Storage-service',
                      label: 'CN-Storage-service',
                    },
                    {
                      value: 'JVM-options',
                      disabled: true,
                      label: 'JVM-options',
                    },
                    {
                      value: 'Qps-延时service',
                      label: 'Qps-延时service',
                    },
                    {
                      value: 'CPU负载均衡service',
                      label: 'CPU负载均衡service',
                    },
                    {
                      value: 'CPU负载均衡service',
                      label: 'CPU负载均衡service',
                    },
                  ]}
                />
              </Form.Item>
              <Form.Item
                label="处置规则"
                name="alarmRule"
                rules={[
                  {
                    required: true,
                    message: '输入告警规则!',
                  },
                ]}
              >
                <Select
                  style={{width:300}}
                  mode="tags"
                  showSearch
                  allowClear
                  defaultValue=""
                  options={[
                    {
                      value: 'CPU阈值 50<100',
                      label: 'CPU阈值 50<100',
                    },
                    {
                      value: 'GPU阈值 65<100',
                      label: 'GPU阈值 65<100',
                    },
                    {
                      value: 'QPU阈值 10<100',
                      label: 'QPU阈值 10<100',
                    },
                    {
                      value: 'ACE集群 0<10',
                      label: 'ACE集群 0<10',
                    },
                    {
                      value: 'NET带宽 200<1000(KB/S)',
                      label: 'NET带宽 200<1000(KB/S)',
                    },
                    {
                      value: '磁盘满载率 20<100(%)',
                      label: '磁盘满载率 20<100(%)',
                    },
                    {
                      value: 'SSD 0<10(TB)',
                      label: 'SSD 0<10(TB)',
                    },     
                    {
                      value: '弹性云ECS 0<50(%)',
                      label: '弹性云ECS 0<50(%)',
                    }, 
                    {
                      value: 'Oracle 0<100(%)',
                      label: 'Oracle 0<100(%)',
                    },                                                       
                  ]}
                />
              </Form.Item>
              <Form.Item
                label="部署方式"
                name="type"
                rules={[
                  {
                    required: true,
                    message: '选择部署方式',
                  },
                ]}
              >
                <Select
                  style={{width:300}}
                  defaultValue=""
                  options={[
                    {
                      value: '集群部署',
                      label: '集群部署',
                    },
                    {
                      value: '分布式部署',
                      label: '分布式部署',
                    },
                    {
                      value: '主备倒换部署',
                      label: '主备倒换部署',
                    },
                    {
                      value: '机房整机部署',
                      label: '机房整机部署',
                    },
                  ]}
                />
              </Form.Item>
              <Form.Item label="规则间隔" 
                name="interval"
                rules={[
                  {
                    required: true,
                    message: '请输入规则间隔!',
                  }
                ]}>
                  <InputNumber style={{width:200,display:'inline-block'}}  />
                  <Select
                    style={{width:100,display:'inline-block',marginLeft:5}}
                    defaultValue=""
                    options={[
                      {
                        value: '分钟',
                        label: '分钟',
                      },
                      {
                        value: '小时',
                        label: '小时',
                      },
                      {
                        value: '天',
                        label: '天',
                      },
                      {
                        value: '月',
                        label: '月',
                      },
                    ]}
                  />
              </Form.Item>
              <Form.Item
                label="脚本语言"
                name="script"
                rules={[
                  {
                    required: true,
                    message: '选择脚本语言',
                  },
                ]}
              >
                <Select
                  style={{width:300}}
                  defaultValue=""
                  options={[
                    {
                      value: '.python',
                      label: '.python',
                    },
                    {
                      value: '.shell',
                      label: '.shell',
                    },
                    {
                      value: '.php',
                      label: '.php',
                    },
                    {
                      value: '.jsp',
                      label: '.jsp',
                    },
                    {
                      value: '.lang',
                      label: '.lang',
                    },
                    {
                      value: '.go',
                      label: '.go',
                    },
                    {
                      value: '.javaScript',
                      label: '.javaScript',
                    },                    
                  ]}
                />
              </Form.Item>
              <Form.Item label="执行时间" name="time" 
                rules={[
                  {
                    required: true,
                    message: '选择执行时间!',
                  },
                ]}>
                <DatePicker style={{width:300}} showTime onChange={this.onTimeChange} onOk={this.onTimeOk} />
              </Form.Item> 
              <Form.Item label="Application状态" name="status"                 
                rules={[
                  {
                    required: true,
                    message: '选择Application状态!',
                  },
                ]}>
                <Switch defaultChecked  />
              </Form.Item>
              <Form.Item
                label="Script调用机制"
                name="machine"
                rules={[
                  {
                    required: true,
                    message: '选择Script调用机制!',
                  },
                ]}>
                  <Radio.Group defaultValue="a">
                    <Radio value="a">轮询</Radio>
                    <Radio value="b">一次性</Radio>
                    <Radio value="c">周期性</Radio>
                  </Radio.Group>
              </Form.Item>                             
              <Form.Item label="处置描述" name="description">
                <TextArea  rows={2} />
              </Form.Item>     
              <Form.Item label="脚本文件" name="annex" 
               rules={[
                {
                  required: true,
                  message: '上传脚本文件!',
                },
              ]}>
                <Upload {...uploadProps}>
                  <Button icon={<UploadOutlined />}>上传脚本</Button>
                </Upload>
                <span style={{color:'#cdcdcd'}}>请选择shell,python,lang,go等脚本文件,大小不超过10MB,最多上传一个</span>
              </Form.Item>      
            </Form>
          </div>
          }
          <div style={{textAlign:'center'}}>
              <Button onClick={()=>{this.changeStep(1)}} type="primary">下一步</Button>
            </div>
        </div>
      )
    }else if(this.state.currentStep === 1){
      return(
        <div style={{width:'100%',marginLeft:30,marginTop:30}}>
           {
            spins ? <div style={{width:'100%',marginLeft:20,marginTop:30,height:300,textAlign:'center'}}><Spin  /></div>:
            <Descriptions
                title=""
                size="small"
                bordered
                column={{
                  xxl: 3,
                  xl: 3,
                  lg: 3,
                  md: 3,
                  sm: 2,
                  xs: 1,
                }}>
                <Descriptions.Item label="故障名称"><a>{detailInfo.name}</a></Descriptions.Item>
                <Descriptions.Item label="CPU状态">{cpuInfo.cpu >50 ? <Badge status="error" text='异常' /> : <Badge status="success" text='正常' /> }</Descriptions.Item>
                <Descriptions.Item label="Storage状态">{cpuInfo.storage >50 ? <Badge status="error" text='异常' /> : <Badge status="success" text='正常' /> }</Descriptions.Item>
                <Descriptions.Item label="Disc状态">{cpuInfo.disc >50 ? <Badge status="error" text='异常' /> : <Badge status="success" text='正常' /> }</Descriptions.Item>
                <Descriptions.Item label="网络状态">{cpuInfo.network >50 ? <Badge status="error" text='拥堵或者中断' /> : <Badge status="success" text='通畅' /> }</Descriptions.Item>
                <Descriptions.Item label="公网IP状态">{cpuInfo.acoustic >50 ? <Badge status="error" text='异常' /> : <Badge status="success" text='正常' /> }</Descriptions.Item>
                <Descriptions.Item label="服务器温度监控">{cpuInfo.temperature >50 ? <Badge status="error" text='异常' /> : <Badge status="success" text='正常' /> }</Descriptions.Item>
                <Descriptions.Item span={2} label="脚本巡检过程">
                  机器硬件检查: 正常 2023-02-07 10:25:57
                  <br />
                  I/O状态: 服务队列正常 2023-03-01 14:29:37
                  <br />
                  web服务: Nginx服务正常运行 2023-03-05 18:51:58
                  <br />
                  后台服务: Docker运行正常 2023-03-12 17:29:38
                  <br />
                  数据库服务: 服务连接中段 <Badge status="error" /> 2023-03-22 17:29:38
                  <br />
                  进程结束: 监测数据库问题  2023-03-30 10:19:31
                </Descriptions.Item>
            </Descriptions>
          }
            <div style={{textAlign:'center',margin:15}}>
              <Button onClick={()=>{this.changeStep(2)}} type="primary">下一步</Button>
            </div>
        </div>
      )
    }else if (this.state.currentStep === 2){
      return (
      <div style={{width:'100%',marginLeft:20,marginTop:30}}>
         {
            spins ? <div style={{width:'100%',marginLeft:20,marginTop:30,height:300,textAlign:'center'}}><Spin  /></div>:
        <Form
          name="basic"
          style={{width:836,margin:'0 auto'}}
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 20,
          }}
          initialValues={{
            username: '',
            phone:"",
            type:"",
            offer:0,
            description:'',
            pic:'',
            annex:''
          }}
          autoComplete="off">
          <Form.Item
            label="修复人员"
            name="username"
            rules={[
              {
                required: true,
                message: '输入修复人员!',
              },
            ]}
          >
            <Input style={{width:300}} />
          </Form.Item>
          <Form.Item
            label="手机号码"
            name="phone"
            rules={[
              {
                required: true,
                message: '输入手机号码!',
              },
            ]}
          >
            <Input style={{width:300}}  />
          </Form.Item>
          <Form.Item
            label="脚本类型"
            name="type"
            rules={[
              {
                required: true,
                message: '选择脚本类型!',
              },
            ]}
          >
            <Select
              style={{width:300}}
              defaultValue=""
              options={[
                {
                  value: 'shell脚本修复',
                  label: 'shell脚本修复',
                },
                {
                  value: 'python脚本修复',
                  label: 'python脚本修复',
                },
                {
                  value: 'lang',
                  label: 'lang',
                },
                {
                  value: 'go',
                  label: 'go',
                },
              ]}
            />
          </Form.Item>
          <Form.Item label="服务器重启间隔" 
             name="offer"
             rules={[
              {
                required: true,
                message: '请输入服务器重启间隔!',
              }
            ]}>
            <InputNumber  style={{width:300}}  /> <span>分钟</span>
          </Form.Item>
          <Form.Item label="通知方式" name="pic" >
            <Select
                style={{width:300}}
                defaultValue=""
                options={[
                  {
                    value: '短信通知',
                    label: '短信通知',
                  },
                  {
                    value: '机器人电话',
                    label: '机器人电话',
                  },
                  {
                    value: 'Email邮件',
                    label: 'Email邮件',
                  }
                ]}
              />
          </Form.Item>
          <Form.Item label="SQL注入" placeHo name="description"         
              tooltip={{
              title: 'SQL注入机器进行数据库测试,防止注入,数据库服务重启之后进行测试',
              icon: <InfoCircleOutlined />,
            }}>
            <TextArea placeholder="示例: select count(sname) as A from t_student where sname like select t_student.id as B from t_results a join t_student b on a.sid = b.id where math > chinese" rows={3} />
          </Form.Item>     
          <Form.Item label="script补充说明" name="annex" tooltip={{
              title: '脚本补充说明,安全测试,服务重启之后进行自动测试',
              icon: <InfoCircleOutlined />,
            }}>
            <TextArea rows={1} />
          </Form.Item>      
        </Form>
        }
        <div style={{textAlign:'center'}}>
          <Button onClick={()=>{this.changeStep(3)}} type="primary">修复问题</Button>
        </div>
      </div>
      );
    }else{
      return(
        <div style={{width:'100%',marginLeft:30,marginTop:30}}>
           {
            spins ? <div style={{width:'100%',marginLeft:20,marginTop:30,height:300,textAlign:'center'}}><Spin  /></div>:
            <Result
              status="success"
              title="告警指标目标服务器问题修复完成"
              subTitle="原因: 脚本巡查数据库的网络堵塞,导致数据库连接异常,网络恢复,数据库服务已重启,问题解决"
              extra={[
                <Button type="primary" onClick={()=>{this.setState({handleVisible:false})}} key="console">
                  确定
                </Button>,
                <Button key="buy" onClick={()=>{this.changeStep(2)}}>返回</Button>,
              ]}
            />}
        </div>
      )
    }
  }

  render() {
    const { tableDatas, loading, columns, currentStep, alarmVisible, handleVisible,  values, detailInfo, cpuInfo, hostColumns, loadings, tableData, recordTableData, recordVisible, recordColumns } = this.state;
    let onEvents={
      'click': this.onChartClick.bind(this),
    }
    let onRecordEvents={
      'click': this.onRecordEvents.bind(this),
    }
    return (
      <>
        <div style={{marginLeft:0}}>
            <Breadcrumbs props={this.props}></Breadcrumbs>
        </div>
        <Divider />   
        <div style={{margin:30}}>
          <div>
            <Title style={{textAlign:'left',marginLeft:30,marginBottom:45}} level={5}><CloudServerOutlined /> 云服务主机告警列表</Title>
              <div style={{margin:'20px 26px'}}>
                <Button style={{marginRight:10}} onClick={this.addData} type="primary"><PlusCircleOutlined /> 添加策略</Button>                
              </div>            
              <Table style={{margin:20}} columns={columns} dataSource={tableDatas} size="middle" onChange={this.onChange}
                loading={loading}
                pagination={{
                  pageSize:10,
                  total:68,
                  showTotal:(total) => `共 ${total} 条`,
                  }
                  } />
          </div>
        </div>
        <Modal title="主机告警分析详情" visible={alarmVisible} onOk={this.handleOk} width={888} onCancel={()=>{this.setState({alarmVisible:false})}}>
            <div style={{width:'100%'}}>
              <Descriptions title={detailInfo.name}>
                <Descriptions.Item label="告警ID">{detailInfo.id}</Descriptions.Item>
                <Descriptions.Item label="主机">{detailInfo.ip}:{detailInfo.port}</Descriptions.Item>
                <Descriptions.Item label="告警等级">{
                detailInfo.level ==='serious'? <Tag color="red">严重</Tag> : detailInfo.level ==='same'? <Tag color="orange">一般</Tag>: <Tag color="green">正常</Tag>
                }</Descriptions.Item>
                <Descriptions.Item label="运营商">移动</Descriptions.Item>
                <Descriptions.Item label="主机数">{detailInfo.source}台</Descriptions.Item>
                <Descriptions.Item span={2} label="告警次数">
                {detailInfo.num >2 ? <span style={{color:'red',fontSize:16, fontWeight:600}}> {detailInfo.num} </span>: <span> {detailInfo.num} </span>}
                  次</Descriptions.Item>
                <Descriptions.Item span={1} label="主机状态">
                  {
                    detailInfo.level ==='serious'? <span style={{color:'#aaa'}}><PoweroffOutlined /> 宕机</span> : detailInfo.level ==='same'? <span style={{color:'#d46b08'}}><ClockCircleOutlined /> 检修...</span>: <span style={{color:'#389e0d'}}><SyncOutlined spin /> 运行中</span>
                  }
                </Descriptions.Item>
                <Descriptions.Item span={1} label="触发时间">{detailInfo.creatTime}</Descriptions.Item>
                <Descriptions.Item span={1} label="告警时间">{detailInfo.alarmTime}</Descriptions.Item>
              </Descriptions>
            </div>
            <div>
              <Descriptions title="硬件信息使用信息" bordered>
                <Descriptions.Item label="CPU">{cpuInfo.cpu}%</Descriptions.Item>
                <Descriptions.Item label="内存">{cpuInfo.storage}%</Descriptions.Item>
                <Descriptions.Item label="磁盘">{cpuInfo.disc}%</Descriptions.Item>
                <Descriptions.Item label="带宽">{cpuInfo.network}%</Descriptions.Item>
                <Descriptions.Item label="公网IP">{cpuInfo.acoustic}%</Descriptions.Item>
                <Descriptions.Item label="机器温度">{cpuInfo.temperature}℃</Descriptions.Item>
                <Descriptions.Item label="脚本运行状况" span={3}>
                  {
                    cpuInfo.storage > 50 ? <Badge status="processing" text="运行中" />: <Badge status="default" text="暂停" />
                  }
                  
                </Descriptions.Item>
              </Descriptions>               
            </div>
            <div>
              <div style={{margin:'15px 0'}}>
                <span>级别:</span>
                <Select
                    defaultValue="Region级"
                    style={{
                      width: 120,
                      margin:'0 10px'
                    }}
                    onChange={this.selectChange}
                    options={[
                      {
                        value: 'Region级',
                        label: 'Region级',
                      },
                      {
                        value: 'POD级',
                        label: 'POD级',
                      },
                      {
                        value: 'AZ级',
                        label: 'AZ级',
                      },
                      {
                        value: 'Area',
                        label: 'Area',
                        disabled: true,
                      },
                    ]}
                  />  
                <span>监控类型:</span>
                <Select
                    defaultValue="云产品监控"
                    style={{
                      width: 120,
                      margin:'0 10px'
                    }}
                    onChange={this.selectChange}
                    options={[
                      {
                        value: '云产品监控',
                        label: '云产品监控',
                      },
                      {
                        value: '云服务监控',
                        label: '云服务监控',
                      },
                      {
                        value: '云计算监控',
                        label: '云计算监控',
                      }
                    ]}
                  />   
                <span style={{margin:'0 5px'}}>服务器架构:</span>   
                <Radio.Group onChange={this.timeOnChange} style={{margin:'0 5px'}} value={values}>
                  <Radio value={1}>集群</Radio>
                  <Radio value={2}>分布式</Radio>
                  <Radio value={3}>负载均衡</Radio>
                </Radio.Group>                                             
              </div>
              <Table size="small" style={{width:'100%',margin:'15px 5px',background:'#fff',overflow:"hidden"}} columns={hostColumns} 
                    loading={loadings} dataSource={tableData} 
                    pagination={{
                    pageSizeOptions:['3','5','10','20'],
                    pageSize:3,
                    showSizeChanger: true,
                    onShowSizeChange:this.onShowSizeChange,
                    showTotal: (total) => `总数${total}`
              }}/>
            </div>
          </Modal>  
          <Modal title="主机数据分析" visible={recordVisible} onOk={this.handleOk} width={1328} onCancel={()=>{this.setState({recordVisible:false})}}>
            <h3>硬件指标使用率监控</h3>
            <div className='echartContent'>
                <ReactEcharts
                    option={this.getCPUOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onRecordEvents}
                    style={{width:410,height:162,margin:10}}
                />
                <ReactEcharts
                    option={this.getGPUOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onRecordEvents}
                    style={{width:410,height:162,margin:10}}
                />        
                <ReactEcharts
                    option={this.getNETOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onRecordEvents}
                    style={{width:410,height:162,margin:10}}
                />     
                <ReactEcharts
                    option={this.getStorageOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onRecordEvents}
                    style={{width:410,height:162,margin:10}}
                />
                <ReactEcharts
                    option={this.getDelayedOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onRecordEvents}
                    style={{width:410,height:162,margin:10}}
                />  
                <ReactEcharts
                    option={this.getQPSOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onRecordEvents}
                    style={{width:410,height:162,margin:10}}
                />                                                                                                    
            </div>
            <Table size="small" style={{width:'100%',margin:'5px 2px',background:'#fff',overflow:"hidden"}} 
                columns={recordColumns} loading={loadings} dataSource={recordTableData} 
                    pagination={{
                    pageSizeOptions:['5','10','20'],
                    pageSize:5,
                    showSizeChanger: true,
                    onShowSizeChange:this.onShowSizeChange,
                    showTotal: (total) => `总数${total}`
              }}/>
          </Modal>   
          <Modal title="告警处置" visible={handleVisible} onOk={this.handleOk} width={1328} onCancel={()=>{this.setState({handleVisible:false})}}>
              <div>
                <Descriptions title="服务器硬件基本信息" size="small" bordered>
                  <Descriptions.Item label="CPU">{cpuInfo.cpu}%</Descriptions.Item>
                  <Descriptions.Item label="内存">{cpuInfo.storage}%</Descriptions.Item>
                  <Descriptions.Item label="磁盘">{cpuInfo.disc}%</Descriptions.Item>
                  <Descriptions.Item label="带宽">{cpuInfo.network}%</Descriptions.Item>
                  <Descriptions.Item label="脚本运行状况">
                    {
                        cpuInfo.storage > 50 ? <Badge status="processing" text="运行中" />: <Badge status="default" text="暂停" />
                    }
                  </Descriptions.Item>
                  <Descriptions.Item label="机器温度">{cpuInfo.temperature}℃</Descriptions.Item>
                </Descriptions>               
              </div>
              <Divider />
              <div className="hand_alarm_config">
                <div style={{width:'70%'}}>
                  <Steps
                    style={{marginLeft:30}}
                    current={currentStep}
                    onChange={this.stepOnChange}
                    size="small"
                    items={[
                      {
                        title: '配置运行脚本',
                      },
                      {
                        title: '巡检问题及分析',
                      },
                      {
                        title: '脚本巡检修复',
                      },
                      {
                        title: '修复结果',
                      },
                    ]}
                  />
                  {
                    this.getCurrent()
                  }                  
                </div>
                <div style={{width:'23%',marginLeft:20}}>
                    {
                      this.state.currentStep === 0 ?
                      <Timeline pending="巡检准备中...">
                        <Timeline.Item>巡检开始 2023-03-29 10:25:36</Timeline.Item>
                        <Timeline.Item > <span>服务器硬件巡检准备中... 2023-03-29 10:25:36</span> </Timeline.Item>
                      </Timeline>
                      
                       : this.state.currentStep === 1 ?
                       <Timeline pending="I/O状态,进程巡检中...">
                       <Timeline.Item>巡检开始 2023-03-29 10:25:36</Timeline.Item>
                       <Timeline.Item color="green"> <span>服务器硬件巡检完成 2023-03-29 10:25:36</span> </Timeline.Item>
                       <Timeline.Item color="green"> <span>服务器软件巡检完成 2023-03-30 09:03:27</span> </Timeline.Item>
                       <Timeline.Item > <span>服务器I/O状态,进程巡检中... 2023-03-30 09:03:27</span> </Timeline.Item>
                     </Timeline>:  this.state.currentStep === 2 ?
                      <Timeline>
                      <Timeline.Item >巡检开始 2023-03-29 10:25:36</Timeline.Item>
                      <Timeline.Item color="green"> <span>服务器硬件巡检 2023-03-29 10:25:36</span> </Timeline.Item>
                      <Timeline.Item color="green"><span>服务器软件巡检 2023-03-30 09:03:27</span></Timeline.Item>
                      <Timeline.Item color="green"><span>服务器I/O状态,进程巡检 2023-03-30 09:03:27</span></Timeline.Item>
                      <Timeline.Item color="green"><span>数据库服务巡检完成 2023-03-30 19:33:57</span></Timeline.Item>
                      <Timeline.Item color="red"><span>巡检结束 数据库问题 2023-03-31 10:14:27</span></Timeline.Item>
                    </Timeline>:
                    <Timeline>
                      <Timeline.Item >巡检开始 2023-03-29 10:25:36</Timeline.Item>
                      <Timeline.Item color="green"> <span>服务器硬件巡检 2023-03-29 10:25:36</span> </Timeline.Item>
                      <Timeline.Item color="green"><span>服务器软件巡检 2023-03-30 09:03:27</span></Timeline.Item>
                      <Timeline.Item color="green"><span>服务器I/O状态,进程巡检 2023-03-30 09:03:27</span></Timeline.Item>
                      <Timeline.Item color="green"><span>数据库服务巡检完成 2023-03-30 19:33:57</span></Timeline.Item>
                      <Timeline.Item color="red"><span>巡检结束 数据库问题 2023-03-31 10:14:27</span></Timeline.Item>
                      <Timeline.Item color="red"><span>脚本修复数据库MySQL问题 2023-03-31 11:18:27</span></Timeline.Item>
                      <Timeline.Item color="green"><span>脚本检查SQL副本及线程池 2023-03-31 14:14:57</span></Timeline.Item>
                      <Timeline.Item color="green"><span>数据SQL修复完成 2023-03-31 16:01:37</span></Timeline.Item>
                      <Timeline.Item ><span>重启服务器主机 2023-03-31 17:27:29</span></Timeline.Item>
                      <Timeline.Item color="green"><span>服务正常运行 2023-03-31 18:01:59</span></Timeline.Item>
                    </Timeline>
                    }
                </div>
              </div>
          </Modal>             
      </>
    )
    }
}
